<template>
	<view class="container">
		<NavBar title="题库分类"/>
		<Category class="content" :data="category" @itemClick="handleCategroy">
			<u-cell-group>
				<u-cell
					v-for="(item,index) in data"
					:key="index"
					isLink
					:title="item.name"
					:label="'共' + item.count + '道题'"
					@click="handleClick(item)">
					<LegoIcon slot="icon" icon="icon-contract" backgroundColor="#fff" color="#268bd5"></LegoIcon>
				</u-cell>
			</u-cell-group>
		</Category>
	</view>
</template>

<script>
import Item from './item'
import Category from '@/components/category'
export default {
	components: {
		Item,
		Category
	},
	data() {
		return {
			category: [
				{
					code: '1',
					name: 'JAVA八股文'
				},
				{
					code: '2',
					name: 'BOSS员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				},
				{
					code: '3',
					name: '新媒体员工培训'
				}
			],
			data: [
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				},
				{
					code: '1',
					name: 'Hello World',
					count: 10
				}
			]
		};
	},
	computed: {
	},
	methods: {
		handleCategroy(data) {
			console.log(data)
		},
		handleClick(data) {
			this.$navTo('pages/app/exam/detail/index', {code: data.code, name: data.name})
		}
	}
};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.content {
		flex: 1;
		overflow: hidden;
	}
</style>